<template>
  <div class="home-details">
    <van-nav-bar
      fixed
      left-arrow
      @click-left="onClickLeft"
    >
      <div class="nav-con clearfix" slot="title">
        <div class="user-img fl"></div>
        <div class="user-name fl">{{con.author}}</div>
      </div>
    </van-nav-bar>
    <div class="article-con">
      <div class="ac-title">{{con.title}}</div>
      <div class="ac-con">{{con.content}}</div>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'vant'
import { GET } from '../../api/common'
export default {
  name: "homeDetails",
  components: {
    [NavBar.name]: NavBar,
  },
  data() {
    return {
      con: {},
    };
  },
  created() {
    setTimeout(() => {
      this.$store.state.showFooter = false
      this.getData()
    },20)
  },
  methods: {
    getData() {
      let params = {
        article_id: this.$route.params.id
      }
      GET('api/article', params).then((res) => {
        if (res.code == 200) {
          this.con = res.data
        }
        else if (res.code == 403) {
          this.$alert('您还不是会员！')
        }
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped lang="less">
  .nav-con {
    padding-top: 8px;
    position: relative;
    left: -20px;
    .user-img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #ddd;
      margin-right: 10px;
    }
    .user-name {
      margin-top: -8px;
    }
  }
  .article-con {
    padding: 56px 15px 15px;
    .ac-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
</style>
